<template>
	<view class="content" :style="{
			  backgroundImage: `url('${bg_image}')`,
			  backgroundSize: '100% 100%',
			  height:'100vh'
			}">
		<view class="arr" @click='back'>
			<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
		</view>
		<view class="header-text">
			我的兑换记录
		</view>
		<view class="width-444 height-90" style="margin: 0 auto; margin-top: 300rpx;">
			<image :src="vip_image" mode="" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="code-main" v-if="list.length==0">
			<view class="width-120 height-120" style="margin: 0 auto;">
				<image src="../../static/member-icon.png" mode="" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="text-center fontSize-40 marginTop-40" style="color: #E9C28D;">
				您还没有兑换过会员哦
			</view>
		</view>
		<view class="" v-if="list.length!=0">
			<view class="list marginTop-100">
				<view class="width-686 height-144 flex padding-24 box-sizing borderRadius-20"
					style="background: rgba(233,194,141,0.2);margin: 0 auto;margin-bottom: 20rpx;"
					v-for='(item,index) in list' :key='index'>
					<image :src="crown_image" mode="" style="width: 120rpx; height: 96rpx;"></image>
					<view class="marginLeft-12">
						<view class="fontSize-36" style="color: #E9C28D;">
							{{item.type}}
						</view>
						<view class="fontSize-28 marginTop-6" style="color: #BDA37D;">
							{{item.title}}
						</view>
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';
	const changeCodelogApi = inject("changeCodelog");
	const list = ref([])
	const bg_image = ref('')
	const vip_image = ref('')
	const crown_image = ref('')
	const is_activated = ref(0)
	onLoad((op) => {
		// is_activated.value = op.is_activated
	});
	onShow(() => {
		changeCodelogApi().then((res) => {
			console.log(res);
			list.value = res.data
			bg_image.value = res.bg_image
			vip_image.value = res.vip_image
			crown_image.value = res.crown_image
		});
	});
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.code-main {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.header-text {
		position: absolute;
		left: 50%;
		top: 110rpx;
		transform: translateX(-50%);
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	@media (max-height: 800px) {
		.arr {
			top: 80rpx;
		}

		.header-text {
			top: 80rpx;

		}
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>